<template>
  <div class="refine_intendance">
    <h2 class="titleblue">白名单管理</h2>
    <div class="contant">
      <el-row :gutter="20">
        <el-col :span="8" class="search-item">
          <label class="search-label">品名: </label>
          <el-input class="search-content" v-model="chooption.search1" placeholder="请输入品名"></el-input>
        </el-col>
        <el-col :span="8" class="search-item">
          <label class="search-label">日期: </label>
          <el-input class="search-content" v-model="chooption.search6" placeholder="请输入日期"></el-input>
        </el-col>
        <el-col :span="24" class="search-item search-btn">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button>清空</el-button>
        </el-col>
      </el-row>

      <h3 class="titleblue" style="padding: 0; font-size: 16px;">白名单信息列表</h3>
      <el-row :gutter="20" style="padding: 20px 0 10px">
        <el-button  type="primary" icon="el-icon-circle-plus-outline" @click="showBlack('create')">新增</el-button>
        <el-button  type="primary" icon="el-icon-download" @click="handleDelete(scope.$index, scope.row)">Excel导入</el-button>
        <el-button  type="text" @click="handleDelete(scope.$index, scope.row)">Excel模板下载</el-button>
      </el-row>
      <el-row :gutter="20">
        <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" align="center" width="55"></el-table-column>
          <el-table-column prop="no" label="序号" align="center" width="60">
            <template slot-scope="scope">
              <span>{{scope.$index < 9 && currentPage == 1 ? '0' : ''}}{{(currentPage - 1) * 10 + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <template v-for="(item, index) in thead">
            <el-table-column align="center" :prop="item.prop" :label="item.name" :width="item.width"></el-table-column>
          </template>
          <el-table-column prop="operate" label="操作" align="center" width="140">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="showBlack('edit', scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="currentPage"
                       layout="total,prev, pager, next, jumper" :total="totalNum" background>
        </el-pagination>
      </div>
    </div>
    <!-- 白名单弹层 -->
    <el-dialog title="" :visible.sync="whiteFormShow" @close="closeBlack" width="40%">
      <h2 class="titleblue">白名单信息</h2>
      <div class="detail-content">
        <el-form :model="form" label-width="120px">
          <el-row>
            <el-col :span="24" v-for="(item, index) in formList" :key="index">
              <el-form-item :label="item.label">
                <el-input v-model="form[item.key]" auto-complete="off" class="form-item-width"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="footerbtn">
        <el-button @click="closeBlack">取 消</el-button>
        <el-button type="primary" @click="addBlack">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import DataTable from "@/components/common/DataTable.vue"

    export default {
        name: 'WhiteList',
        components: {
            'data-table': DataTable
        },
        data: function () {
            return {
                chooption: {
                    search1: '',
                    search2: '',
                    search3: '',
                    search4: '',
                    search5: '',
                    search6: ''
                },
                totalNum: 1,
                currentPage: 0,
                thead: [
                    {name: '品名', prop: 'pinming', width: ''},
                    {name: '录入时间', prop: 'luru', width: ''},
                    {name: '更新时间', prop: 'gengxin', width: ''}
                ],

                formList: [
                    {label: '品名', key: 'pinming'}
                ],
                tableData: [],
                multipleSelection: [],
                whiteFormShow: false,
                form: {
                    pinming: ''
                },
                formLabelWidth: '120',
                showType: ''
            }
        },
        created () {
            this.getData()
        },
        methods: {
            // 获取表格数据
            getData () {
                let arr = [
                    {
                        pinming: '测试1',
                        luru: '测试1',
                        gengxin: '测试1'
                    }
                ]
                this.tableData = arr
            },
            // 显示白名单弹层
            showBlack (type, index, data) {
                this.whiteFormShow = true
                this.showType = type
                if (type == 'edit') {
                    for (let key in data) {
                        if (data[key]) {
                            this.form[key] = data[key]
                        }
                    }
                }
            },
            // 关闭白名单弹层
            closeBlack () {
                this.whiteFormShow = false
                this.form = {
                    pinming: ''
                }
            },
            // 添加白名单
            addBlack () {
                if (this.showType == 'create') {
                    this.tableData.push(this.form)
                } else {

                }
                this.closeBlack()
            },
            handleSelectionChange (val) {
                this.multipleSelection = val
            },
            handleEdit (index, data) {},
            // 删除其中一条
            handleDelete (index, data) {
                this.$confirm('您确定要删除这条黑名单信息吗？', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    center: true
                }).then((res) => {
                    this.tableData.splice(index, 1)
                    this.blackFormShow = false
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    this.getData()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            manipulate (param) {
            },
            handleSizeChange() {},
            handleCurrentChange() {},
            // 查询参数拼接函数
            handlerQuery() {
                let str = ''
                let obj = this.chooption
                for (let key in obj) {
                    if (key == 'search1' && obj[key]) {
                        if (str) {
                            str += '&'
                        }
                        // this.$m(obj[key]).toISOString()
                        str += 'begineTime.greaterOrEqualThan=' + obj[key]
                    } else if (key == 'search2' && obj[key]) {
                        if (str) {
                            str += '&'
                        }
                        str += 'begineTime.greaterOrEqualThan=' + obj[key]
                    } else if (key == 'search3' && obj[key]) {
                        if (str) {
                            str += '&'
                        }
                        str += 'begineTime.greaterOrEqualThan=' + obj[key]
                    } else if (key == 'search4' && obj[key]) {
                        if (str) {
                            str += '&'
                        }
                        str += 'begineTime.greaterOrEqualThan=' + obj[key]
                    } else if (key == 'search5' && obj[key]) {
                        if (str) {
                            str += '&'
                        }
                        str += 'begineTime.greaterOrEqualThan=' + obj[key]
                    }
                }
                return str
            },
            // 查询函数
            search(num = 0) {
                if (num == 0) {
                    this.$set(this, 'currentPage', 1)
                }
                let str = this.handlerQuery()
            },
        }
    }
</script>

<style lang="scss" scoped>
  .refine_intendance{
    width: 100%;
  }
  .search-item{
    padding: 10px 0;
  }
  .search-label{
    display: inline-block;
    width: 120px;
    text-align: right;
  }
  .search-content{
    max-width: calc(100% - 150px);
    margin-left: 20px;
    width: 100%;
  }
  .search-btn{
    text-align: center;
  }
  .detail-content{
    padding: 20px;
  }
  .dialog-footer{
    text-align: center;
    padding-bottom: 40px;
  }
  .form-item-width{
    width: 80%;
  }
  .form-text-width{
    width: 91%;
  }
</style>
